<template>
  <div ref="canvasContainer" class="fixed inset-0 -z-10">
    <canvas ref="canvas" class="w-full h-full"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const canvas = ref<HTMLCanvasElement>()
const canvasContainer = ref<HTMLDivElement>()

interface Particle {
  x: number
  y: number
  vx: number
  vy: number
  size: number
  opacity: number
  color: string
}

let particles: Particle[] = []
let animationId: number
let ctx: CanvasRenderingContext2D | null = null

const createParticle = (width: number, height: number): Particle => {
  const colors = ['#3b82f6', '#8b5cf6', '#06b6d4', '#10b981']
  return {
    x: Math.random() * width,
    y: Math.random() * height,
    vx: (Math.random() - 0.5) * 0.5,
    vy: (Math.random() - 0.5) * 0.5,
    size: Math.random() * 2 + 1,
    opacity: Math.random() * 0.5 + 0.1,
    color: colors[Math.floor(Math.random() * colors.length)]
  }
}

const initParticles = (width: number, height: number) => {
  particles = []
  const particleCount = Math.min(50, Math.floor((width * height) / 15000))
  
  for (let i = 0; i < particleCount; i++) {
    particles.push(createParticle(width, height))
  }
}

const updateParticle = (particle: Particle, width: number, height: number) => {
  particle.x += particle.vx
  particle.y += particle.vy

  // 边界检测
  if (particle.x < 0 || particle.x > width) particle.vx *= -1
  if (particle.y < 0 || particle.y > height) particle.vy *= -1

  // 保持在画布内
  particle.x = Math.max(0, Math.min(width, particle.x))
  particle.y = Math.max(0, Math.min(height, particle.y))
}

const drawParticle = (particle: Particle) => {
  if (!ctx) return

  ctx.save()
  ctx.globalAlpha = particle.opacity
  ctx.fillStyle = particle.color
  ctx.beginPath()
  ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
  ctx.fill()
  ctx.restore()
}

const drawConnections = (width: number, height: number) => {
  if (!ctx) return

  const maxDistance = 100
  
  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      const dx = particles[i].x - particles[j].x
      const dy = particles[i].y - particles[j].y
      const distance = Math.sqrt(dx * dx + dy * dy)

      if (distance < maxDistance) {
        const opacity = (1 - distance / maxDistance) * 0.1
        ctx.save()
        ctx.globalAlpha = opacity
        ctx.strokeStyle = '#3b82f6'
        ctx.lineWidth = 0.5
        ctx.beginPath()
        ctx.moveTo(particles[i].x, particles[i].y)
        ctx.lineTo(particles[j].x, particles[j].y)
        ctx.stroke()
        ctx.restore()
      }
    }
  }
}

const animate = () => {
  if (!canvas.value || !ctx) return

  const width = canvas.value.width
  const height = canvas.value.height

  // 清空画布
  ctx.clearRect(0, 0, width, height)

  // 更新和绘制粒子
  particles.forEach(particle => {
    updateParticle(particle, width, height)
    drawParticle(particle)
  })

  // 绘制连接线
  drawConnections(width, height)

  animationId = requestAnimationFrame(animate)
}

const resizeCanvas = () => {
  if (!canvas.value || !canvasContainer.value) return

  const container = canvasContainer.value
  const rect = container.getBoundingClientRect()
  
  canvas.value.width = rect.width
  canvas.value.height = rect.height

  initParticles(rect.width, rect.height)
}

onMounted(() => {
  if (!canvas.value) return

  ctx = canvas.value.getContext('2d')
  if (!ctx) return

  resizeCanvas()
  animate()

  window.addEventListener('resize', resizeCanvas)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', resizeCanvas)
})
</script>
</template>